<template>
	<div>
		<el-form :disabled="isDisabled" class="dialog-layout" ref="userForm" :rules="rules" :model="state.ruleForm" size="default" label-width="120px">
			<el-row :gutter="35">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<div class="title-info">基本信息</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" prop>
					<el-form-item label="系统编码" prop="code">
						<el-input v-model="state.ruleForm.code" placeholder="请输入系统编码" clearable></el-input>
					</el-form-item>
				</el-col>

				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" prop>
					<el-form-item label="系统名称" prop="name">
						<el-input v-model="state.ruleForm.name" placeholder="请输入系统名称" clearable></el-input>
					</el-form-item>
				</el-col>

				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="鉴权方式" prop="authenticationMethod">
						<el-select v-model="state.ruleForm.authenticationMethod" placeholder="请选择鉴权方式" class="w100">
							<el-option label="IP鉴权" :value="1" />
							<el-option label="域名鉴权" :value="2" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="授权状态" prop="isAuthorization">
						<el-select v-model="state.ruleForm.isAuthorization" placeholder="请选择鉴权状态" class="w100">
							<el-option label="已授权" :value="true" />
							<el-option label="未授权" :value="false" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="AppKey" prop="appKey">
						<el-input v-model="state.ruleForm.appKey" placeholder="请输入AppKey" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="授权类型" prop="authorizationType">
						<el-select v-model="state.ruleForm.authorizationType" multiple placeholder="请选择授权类型" class="w100">
							<el-option label="查询数据" value="1" />
							<el-option label="修改数据" value="2" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="AppSecret" prop="secretKey">
						<el-input v-model="state.ruleForm.secretKey" placeholder="请输入AppSecret" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="授权期限(天)" prop="authorizationDate">
						<el-input v-model.number="state.ruleForm.authorizationDate" placeholder="请输入授权期限(天)" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="限制查询(天)" prop="limitQueryDate">
						<el-input v-model.number="state.ruleForm.limitQueryDate" placeholder="请输入限制查询(天)" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="限制修改(天)" prop="limitUpdateDate">
						<el-input v-model.number="state.ruleForm.limitUpdateDate" placeholder="请输入限制修改天数(天)" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <div class="title-info">鉴权配置</div> </el-col>
				<template v-if="state.ruleForm.authenticationMethod == 1">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="IP鉴权数量">
							<el-input :disabled="true" v-model="state.num"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="IP鉴权配置" prop="configValues">
							<el-input
								@input="ipNum()"
								type="textarea"
								v-model="state.ruleForm.subSystemAuthenticationConfig.configValues"
								placeholder="请输入鉴权配置以,号分割"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
				</template>
				<template v-else>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="域名鉴权数量">
							<el-input :disabled="true" v-model="state.num"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="域名鉴权配置" prop="configValues">
							<el-input
								@input="ipNum()"
								type="textarea"
								v-model="state.ruleForm.subSystemAuthenticationConfig.configValues"
								placeholder="请输入鉴权配置以,号分割"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
				</template>
			</el-row>
		</el-form>
		<div class="dialog-btn">
			<el-button @click="onCancel" size="default">取 消</el-button>
			<el-button :disabled="isDisabled" type="primary" @click="onSubmit(userForm)" size="default">确 认</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { SubSystemCreate, SubSystemUpdate } from '/@/api/subSystemInfo/index';
import { FormInstance, ElMessage } from 'element-plus';
// 定义父组件传过来的值
const props = defineProps({
	editItem: {
		type: Object,
		default: () => {},
	},
	isDisabled: {
		type: Boolean,
		default: false,
	},
});
// 定义子组件向父组件传值/事件
const emit = defineEmits(['close']);

// 定义变量内容
const state = reactive({
	ruleForm: {
		code: '', // 子系统code
		name: '', // 子系统名称
		authenticationMethod: 1, // 鉴权方式 1：IP鉴权，2：域名鉴权
		isAuthorization: true, // 是否授权
		appKey: '', // appKey
		authorizationType: null, // 授权类型
		secretKey: '', // AppSecret
		authorizationDate: '', // 授权期限(天)
		limitQueryDate: '', // 限制查询天数
		limitUpdateDate: '', // 限制修改天数
		subSystemAuthenticationConfig: {
			id: '',
			subSystemId: '',
			authenticationMethod: '',
			configValues: '',
		},
	} as any,
	num: 0,
	deptData: [] as any[], // 部门数据
	dutiesData: [] as any[], // 职务数据
	userData: [] as any[], // 用户数据
});
onMounted(() => {
	getTableData();
});
// 初始化列表
const getTableData = async () => {
	if (Object.keys(props.editItem).length) {
		for (const key in state.ruleForm) {
			if (props.editItem[key]) state.ruleForm[key] = props.editItem[key];
		}
		if (typeof props.editItem.authorizationType === 'string' && props.editItem.authorizationType.includes(',')) {
			state.ruleForm.authorizationType = props.editItem.authorizationType.split(',');
		} else {
			state.ruleForm.authorizationType = [props.editItem.authorizationType];
		}
		console.log(state.ruleForm.authorizationType);
	}
};

// 关闭弹窗
const onCancel = () => {
	emit('close');
};
const configValuesValue = (rule: any, value: any, callback: any) => {
	if (!state.ruleForm.subSystemAuthenticationConfig.configValues) {
		callback(new Error('请输入配置值'));
	} else {
		callback();
	}
};
const rules = reactive({
	code: [{ required: true, message: '请输入系统code', trigger: ['blur', 'change'] }],
	name: [{ required: true, message: '请输入系统名称', trigger: ['blur', 'change'] }],
	appKey: [{ required: true, message: '请输入AppKey', trigger: ['blur', 'change'] }],
	authorizationType: [{ required: true, message: '请选择授权类型', trigger: ['blur', 'change'] }],
	secretKey: [{ required: true, message: '请输入AppSecret', trigger: ['blur', 'change'] }],
	authorizationDate: [
		{ pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: ['blur', 'change'] },
		{ required: true, message: '请输入授权期限(天)', trigger: ['blur', 'change'] },
	],
	limitQueryDate: [
		{ pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: ['blur', 'change'] },
		{ required: true, message: '请输入限制查询(天)', trigger: ['blur', 'change'] },
	],
	limitUpdateDate: [
		{ pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: ['blur', 'change'] },
		{ required: true, message: '请输入限制修改天数(天)', trigger: ['blur', 'change'] },
	],
	configValues: [{ required: true, validator: configValuesValue, trigger: ['blur', 'change'] }],
});
const userForm = ref<FormInstance>();
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			const params = {
				...state.ruleForm,
			};

			params.subSystemAuthenticationConfig.authenticationMethod = params.authenticationMethod;
			if (params.authorizationType.length) {
				params.authorizationType = params.authorizationType.join(',');
			}
			if (Object.keys(props.editItem).length) {
				await SubSystemUpdate(params, props.editItem.id);
			} else {
				delete params.subSystemAuthenticationConfig.id;
				delete params.subSystemAuthenticationConfig.subSystemId;
				await SubSystemCreate(params);
			}
			ElMessage.success(Object.keys(props.editItem).length ? '修改成功' : '新增成功');
			onCancel();
		}
	});
};
const ipNum = () => {
	if (state.ruleForm.subSystemAuthenticationConfig.configValues) {
		state.num = state.ruleForm.subSystemAuthenticationConfig.configValues.split(/,\s*/).length;
	}
};
</script>

<style scoped lang="scss">
.title-info {
	font-size: 16px;
	color: #000;
	position: relative;
	&::before {
		content: '';
		position: absolute;
		left: -5px;
		top: 50%;
		transform: translateY(-50%);
		width: 2px;
		height: 14px;
		background: var(--next-bg-menuBar);
	}
}
</style>
